<template>
	<view class="">
		<view class="page-bg-gray"></view>
		<view class="form-box" style="padding: 0 30rpx;">
		<u-form label-align="center" label-width="180" :model="form1" ref="uForm1">
			<u-form-item label="原因">
				<u-radio-group v-model="value" @change="radioGroupChange" wrap>
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in list" :key="index" 
						active-color="red"
						:name="item.name"
						:disabled="item.disabled"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="value === '其他'">
				<u-input type="textarea" v-model="other"></u-input>
			</u-form-item>
		</u-form>
		</view>
		<view class="addSite" @click="submitClose">
			<view class="add">
				确认取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form1: {},
				list: [
					{
						name: '买错了',
						disabled: false
					},
					{
						name: '地址填错了',
						disabled: false
					},
					{
						name: '规格选错了',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '买错了',
				other: ''
			}
		},
		onLoad() {
			// console.log(this.$Route.query)
			// this.getData(this.$Route.query)
		},
		methods:{
			fenZhuanYuan(_price){
				return (_price / 100).toFixed(2)
			},
			getData(_query){
				this.$api.order.details({id:_query.id}).then(res => {
					console.log(res)
				})
				.catch(err => {
					console.log(err)
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			submitClose(){
				if (this.value === '其他' && this.other.length < 1){
					this.$u.toast('请填写其他内容')
					return
				}
				let submitData = {}
				submitData['id'] = this.$Route.query.id
				submitData['remark'] = this.value
				if (this.value === '其他'){
					submitData['remark'] = this.other
				}
				uni.showLoading({
					
				})
				submitData['remark'] = '关闭订单原因：' + submitData['remark']
				this.$api.order.submitCloseOrder(submitData).then(res => {
					this.$u.toast('提交成功')
					this.$myRouter.back()
				}).catch(err => {
					this.$u.toast(err.message)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;
		.add{
			display: flex;
			align-items: center;
			color: #ffffff;
			.icon{
				margin-right: 10rpx;
			}
		}
		&.disable{
			background-color: #CCC;
		}
	}
	.form-box{
		background-color: #FFF;
	}
</style>